<template>
    <div>
        <el-row>
            <el-col :span="11">
                <el-form-item label="品牌">
                    <el-select
                               placeholder="请选择品牌"
                               v-model="searchObj.brandId"
                               style="width: 100%"
                               >
                        <el-option
                                   :label="brand.name"
                                   v-for="brand in brands"
                                   :key="brand.id"
                                   :value="brand.id"
                                   />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="1"></el-col>
            <el-col :span="11">
                <el-form-item label="分类">
                    <el-cascader
                                 v-model="searchObj.categoryId"
                                 :props="props"
                                 style="width:100%"
                                 />
                </el-form-item>
            </el-col>
        </el-row>
        <el-row style="display:flex">
            <el-button type="primary" @click="handleSearch" size="small">
                搜索
            </el-button>
            <el-button size="small" @click="reset">重置</el-button>
        </el-row>

        <div class="tools-div">
            <el-button type="success" size="small" @click="dialogVisible = true">
                添 加
            </el-button>
        </div>

        <el-table :data="list" style="width: 100%">
            <el-table-column prop="categoryName" label="分类" />
            <el-table-column prop="brandName" label="品牌" />
            <el-table-column prop="brandLogo" label="品牌图标" #default="scope">
                <img :src="scope.row.brandLogo" width="50" />
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" />
            <el-table-column label="操作" align="center" width="200" #default="scope">
                <el-button
                           type="primary"
                           size="small"
                           @click="handleShowUpdateDialog(scope.row)"
                           >
                    修改
                </el-button>
                <el-button type="danger" size="small" @click="handleDel(scope.row)">
                    删除
                </el-button>
            </el-table-column>
        </el-table>

        <el-pagination
                       v-model:current-page="pageNum"
                       v-model:page-size="pageSize"
                       :page-sizes="[1, 2, 3, 4, 5]"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total"
                       @size-change="initData"
                       @current-change="initData"
                       />
        <!-- 新增/修改 对话框 -->
        <div>
            <el-dialog v-model="dialogVisible" title="添加或修改" width="30%">
                <el-form label-width="120px">
                    <el-form-item label="品牌">
                        <el-select
                                   class="m-2"
                                   v-model="categoryBrand.brandId"
                                   placeholder="选择品牌"
                                   size="small"
                                   >
                            <el-option
                                       v-for="item in brands"
                                       :key="item.id"
                                       :label="item.name"
                                       :value="item.id"
                                       />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="分类">
                        <el-cascader :props="props" v-model="categoryBrand.categoryId" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleSaveOrUpdate">
                            提交
                        </el-button>
                        <el-button @click="dialogVisible = false">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>
    </div>
</template>

<script setup>
    import { ref, onMounted } from 'vue'
    import { ElMessage } from 'element-plus'
    import { getAllBrands } from '@/api/brand'
    import { getCategoryBrands,saveCategoryBrand,
        deleteCategoryBrandById,updateCategoryBrand,
        getCategoryBrandById } from '@/api/categoryBrand'
    import {getCategoriesByPid}from '@/api/category'
    const pageNum = ref(1)
    const pageSize = ref(3)
    const total = ref(0)
    const list = ref([])
    const searchObj = ref({})
    const initData=async()=>{
        const{data}=await getCategoryBrands(searchObj.value,pageNum.value,pageSize.value)
        list.value=data.list
        total.value=data.total
    }

    const brands = ref([])
    const getAllBrand = async () => {
        const { data } = await getAllBrands()
        brands.value = data
    }
    onMounted(()=>{
        getAllBrand()
        initData()
    })
    const props={
        lazy:true,
        label:'name',
        leaf:'leaf',
        value:'id',
        async lazyLoad(node,resolve){
            let pid=0
            if(node.data && node.data.id){
                pid=node.data.id
            }
            const{data}=await getCategoriesByPid(pid)
            data.forEach(cate=>{
                cate.leaf=!cate.hasChildren
            })
            resolve(data)
        }
    }

    const reset=()=>{
        searchObj.value={}
        pageNum.value=1
        pageSize.value=3
        initData()
    }

    const handleSearch=()=>{
        if(searchObj.value.categoryId && searchObj.value.categoryId.length===3){
            searchObj.value.categoryId=searchObj.value.categoryId[2]
        }else{
            searchObj.value.categoryId=null
        }
        initData()
    }

    const handleDel=async(row)=>{
        await deleteCategoryBrandById(row.id)
        ElMessage.success('删除成功')
        initData()
    }
    const categoryBrand = ref({})
    const dialogVisible = ref(false)
    const handleSave=async()=>{
        categoryBrand.value.categoryId=categoryBrand.value.categoryId[2]
        if(categoryBrand.value.brandId&&categoryBrand.value.categoryId){
            await saveCategoryBrand(categoryBrand.value)
        }
        dialogVisible.value=false
        initData()
    }
    const handleSaveOrUpdate=()=>{
        if(categoryBrand.value.id){
            handleUpdate()
        }else{
            handleSave()
        }
    }
    const handleShowUpdateDialog=async(row)=>{
        const{data}=await getCategoryBrandById(row.id)
        categoryBrand.value=data
        dialogVisible.value=true
    }

    const handleUpdate=async()=>{
        if(typeof categoryBrand.value.categoryId==='object'
        &&categoryBrand.value.categoryId.length===3){
            categoryBrand.value.categoryId=categoryBrand.value.categoryId[2]
            await updateCategoryBrand(categoryBrand.value)
            dialogVisible.value=false
            initData()
        }
    }

</script>